<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr />

    <p>count 值：{{ count }}</p>
    <p>vuex-count 值：{{ ct }}</p>
    <p>money 值：{{ $store.state.money }}</p>
    <!-- 今天这种修改方法以后不会用 -->
    <!-- 因为它不规范，今天用这个临时来修改 -->
    <!-- 只是为了看vuex的特点：一个地方变了，所有地方都变 -->
    <button @click="$store.state.count--" class="btn btn-warning">-1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex' 
export default {
  name: "Right",

  data() {
    return {
      count: 99999,
    };
  },

  computed: {
    // 把vuex里的count，在计算属性中改名叫ct
    // 左边key要改的名字 右边值：vuex里对应的数据
    ...mapState( { ct: 'count' })
  }
};
</script>

<style>
</style>
